<template>
    <view class="page-all">
        <view v-if="listShow" class="address-list">
            <div class="page-title">通讯录</div>
            <div class="list-search">
                <u-search placeholder="请输入部门" v-model="deptName" animation bgColor="#fff"></u-search>
            </div>
            <view class="address-item" style="margin-bottom: 10px;" @click="deptMyInfo">
                <view class="text">
                    <view class="text-h">我的部门</view>
                </view>
                <view class="icon"><u-icon name="arrow-right" color="#333" size="28"></u-icon></view>
            </view>
            <view v-for="item in deptList" :key="item.deptId" class="address-item" @click="deptInfo(item, item.deptId)">
                <view class="text">
                    <view class="text-h"> {{ item.deptName }}</view>
                </view>
                <view class="icon"><u-icon name="arrow-right" color="#333" size="28"></u-icon></view>

            </view>
        </view>
        <ComUserList v-else :user-list="boxInfo.children">
            <view class="child-title" @click="listShow = true">
                <u-icon name="arrow-left" color="#333" size="28"></u-icon>
                {{ boxInfo.deptName }}
            </view>
        </ComUserList>
        <tabbar />
    </view>
</template>

<script setup lang="ts" name="address">
import ComUserList from './components/user-list.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDeptList, getDeptUserList } from '@/api/address'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const deptList = ref<any[]>([])
const boxInfo = ref({ deptName: '', children: [] })
const listShow = ref(true)
const deptName = ref('')
const initData = () => {
    getDeptList().then(({ data }) => {
        deptList.value = data.map((item: any) => {
            item.isload = false
            item.show = false
            item.children = []
            return item
        })
    })
}
const deptInfo = (box: any, id: number | string) => {
    listShow.value = false
    if (box.isload) return boxInfo.value = box
    getDeptUserList(id).then(({ rows }) => {
        box.children = rows
        box.isload = true
        boxInfo.value = box
    })
}
const deptMyInfo = () => {
    const query = {
        deptId: userStore.userInfo.deptId,
        deptName: '我的部门',
        children: [],
        isload: false
    }
    deptInfo(query, query.deptId)
}

onLoad(() => {
    initData()
})
</script>

<style lang="scss" scoped>
.address-list {
    .list-search {
        padding: 5px 10px 10px 10px;
    }

    .address-item {
        padding: 10px;
        display: flex;
        align-items: center;
        background: #fff;
        margin-bottom: 1px;

        .text {
            padding-left: 10px;
            flex: 1;

            .text-h {
                font-size: 16px;
                padding-bottom: 3px;
            }

            .text-t {
                text {
                    font-size: 12px;
                    opacity: 0.7;
                    padding-right: 10px;
                }
            }
        }

        .icon {
            width: 36px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            opacity: 0.3;
        }
    }
}

.child-title {
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
}
</style>
